<!doctype html>

<script src="qtloader.js"></script>
<script src="fontloading.js"></script>

<style>
    body {
        padding: 5px;
    }

    .container {
        display: flex;
    }

    .column {
        flex: 1;
    }
</style>


<script>

    // UI
    let familyCount;
    let families;

    // Data
    let fontFamilies = new Set();
    let loadStartTime;

    // App
    let instance;

    async function updatePermissionStatus() {
        let permissonStatusElement = document.getElementById("permissonStatus");
        let permissionStatus = await navigator.permissions.query({ name: "local-fonts" })
        permissonStatusElement.innerHTML = permissionStatus.state;
    }

    window.onload = async () => {
        let supported = document.getElementById("supported");
        let permissonStatus = document.getElementById("permissonStatus");
        let permission = document.getElementById("permission");
        let defaultfonts = document.getElementById("defaultfonts");
        let allfonts = document.getElementById("allfonts");
        let start = document.getElementById("start");
        let loadFonts = document.getElementById("loadFonts");
        startupTime = document.getElementById("startupTime");
        familyCount = document.getElementById("familyCount");
        families = document.getElementById("families");

        fontFamilies.clear();

        let localFontsAccessSupported = window.queryLocalFonts ? true : false
        if (localFontsAccessSupported) {
            supported.innerHTML = "True"
        } else {
            supported.innerHTML = "False"
            return;
        }

        updatePermissionStatus();

        const module = WebAssembly.compileStreaming(fetch('fontloading.wasm'));

        start.onclick = async () => {

            // Delete any previous instance.
            if (instance) {
                instance.deleteapp(); // see main.cpp
                instance = null;
            }

            loadStartTime = performance.now();
            startupTime.innerHTML = 0;
            familyCount.innerHTML = 0;
            let localFontFamilyLoadCollection = "NoFontFamilies"
            if (defaultfonts.checked)
                localFontFamilyLoadCollection = "DefaultFontFamilies"
            else if (allfonts.checked)
                localFontFamilyLoadCollection = "AllFontFamilies"

            let qtcontainer = document.getElementById("qtcontainer");
            qtcontainer.innerHTML = ""; // clear children
            qtcontainer.style.visibility = "hidden";

            let extraFonts = document.getElementById("extrafonts").value.split(",");

            let config = {
                qt: {
                    module: module,
                    containerElements: [qtcontainer],
                    onLoaded: () => {
                        console.log("JS: onLoaded")
                        qtcontainer.style.visibility = "visible";
                    },
                    entryFunction: window.fontloading_entry,
                    localFonts: {
                        requestPermission: permission.checked,
                        familiesCollection: localFontFamilyLoadCollection,
                        extraFamilies: extraFonts,
                    }
                }
            }
            instance = await qtLoad(config);

            updatePermissionStatus();
        }

        loadFonts.onclick = async () => {
            loadStartTime = null; // disable timer
            let fontsFamilies = document.getElementById("extraRuntimeFontFamilies").value.split(",");
            console.log("extraRuntimeFontFamilies: " + fontsFamilies);
            instance.qtLoadLocalFontFamilies(fontsFamilies);
        }
    };

    function fontFamiliesLoaded(count) {
        familyCount.innerHTML = count;
        if (loadStartTime) {
            elapsed = performance.now() - loadStartTime;
            startupTime.innerHTML = Math.round(elapsed  + 1);
        }
    }

    function fontFamilyLoaded(family) {
        fontFamilies.add(family);
    }

</script>

<h2>Local Font Loading Test</h2>
<p>Click "Load" button below to load the Qt test app with the specified settings. This test provides additional logs on the JavaScript console.</p>

<div class="container">
    <div class="column">
        <span>Browser supports the Local Font Access API: </span><span id="supported" style="font-weight: bold;"></span><br>
        <span>Local Font Access permission status: </span><span id="permissonStatus" style="font-weight: bold;"></span><br>
        <br>
        <input type="checkbox" id="permission"><label for="permission">Ask for Local Font access permission on startup</label><br>
        <input type="radio" id="nofonts" name="fontset"></input><label for="nofonts">No local fonts</label><br>
        <input type="radio" id="defaultfonts" name="fontset" checked></input><label for="defaultfonts">Default local fonts (web-safe fonts)</label><br>
        <input type="radio" id="allfonts" name="fontset"></input><label for="allfonts">All local fonts (warning: extremely slow)</label><br>
        <br>
        <label for="extrafonts">Extra Font Families (comma separated) </label><input type="text" id="extrafonts" value=""></input><br>
        <br>
        <input type="checkbox" id="permission"><label for="permission">Enable 'Fonts' Logging Category</label><br>
        <input type="checkbox" id="permission"><label for="permission">Enable Font Streaming</label><br>
        <br>
        <button type="button" id="start">Start Application</button><br>
        <br>

        <span>Startup time: </span><span id="startupTime"></span><br>
        <span>Font family count: </span><span id="familyCount"></span><br>
        <span>Font families: </span><span id="families"></span><br>
        <br>

        <button type="button" id="loadFonts">Load Extra Fonts</button>
        <input type="text" id="extraRuntimeFontFamilies" value=""></input><br>
    </div>

    <div class="column">
        <div id="qtcontainer" style="width: 100%; height: 300px; visibility: hidden;"></div>
    </div>
</div>


